<template>
    <div>
        <el-upload action="#" list-type="picture-card" :file-list="fileList" :on-remove="handleRemove" :on-preview="handlePreview" :limit="maxCount"
        :on-exceed="handleExceed" :http-request="uploadFile">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
  import {uploadFile} from '@/api/pmsApi'
  export default {
    name: 'MultiUpload',
    props: {
        // 图片属性数组
        value: Array,
        // 最大上传图片数量
        maxCount: {
            type:Number,
            default:5
        }
    },
    data() {
        return {
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },
    computed: {
        fileList() {
            let fileList = [];
            for (let i = 0; i < this.value.length; i++) {
                fileList.push({url: this.value[i]});
            }
            return fileList;
        }
    },
    methods: {
        emitInput(fileList) {
            let value = [];
            for(let i = 0; i < fileList.length; i++){
                value.push(fileList[i].url);
            }
            this.$emit('input', value)
        },
        handleRemove(file, fileList) {
            this.emitInput(fileList);
        },
        handlePreview(file) {
            this.dialogVisible = true;
            this.dialogImageUrl = file.url;
        },
        handleExceed() {
            this.$message({
                message: '最多只能上传'+this.maxCount+'张图片',
                type: 'warning',
                duration:1000
            });
        },
        uploadFile(content) {
            console.log(content);
            const file = content.file;
            var formData = new FormData();
            formData.append('file', file)
            uploadFile(formData).then(response => {
                let data = response.data;
                this.fileList.push({name: data.name, url: data.url});
                this.emitInput(this.fileList);
            })
        }
    }
}
</script>